<template>
  <!-- 轮播图 -->
  <div style="background-color:#f5f5f5">
    <div class="d-flag" style="
      background-image: url('http://p1.music.126.net/d8xpUSCB8EWqGUYhpVJw7g==/109951167133617072.jpg?imageView&blur=40x20');
    ">
      <div class="wrap">
        <div class="show" style="z-index: 15">
          <div class="show-img">
            <a href="" class="img-a" hidefocus="true" style="overflow: hidden">
              <img src="http://p1.music.126.net/d8xpUSCB8EWqGUYhpVJw7g==/109951167133617072.jpg?imageView&quality=89"
                alt="" class="img-flag" />
            </a>
          </div>
          <span class="click-flag showleft" @click="showleft"></span>
          <span class="click-flag showright" @click="showright"></span>
          <div class="dots">
            <a href="#" class="pg bg-click" @click.prevent="switchimg($event, 0)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 1)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 2)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 3)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 4)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 5)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 6)"></a>
            <a href="#" class="pg" @click.prevent="switchimg($event, 7)"></a>
          </div>
        </div>
        <div class="download">
          <div class="side-download"></div>
          <p class="tips-download">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
          <div class="shadow-l"></div>
          <div class="shadow-r"></div>
        </div>
      </div>
    </div>
    <div class="discover-module g-bd">
      <div class="discover-l">
        <div class="discover-lbody">
          <div class="d-wrap">
            <div class="d-rmd">
              <div class="d-hd">
                <a href="http://localhost:8080/#/Home/playList" class="hot">热门推荐</a>
                <div class="rmd-tab">
                  <a href="http://localhost:8080/#/Home/playList/?cat=华语">华语</a>
                  <span class="line">|</span>
                  <a href="http://localhost:8080/#/Home/playList/?cat=流行">流行</a>
                  <span class="line">|</span>
                  <a href="http://localhost:8080/#/Home/playList/?cat=摇滚">摇滚</a>
                  <span class="line">|</span>
                  <a href="http://localhost:8080/#/Home/playList/?cat=民谣">民谣</a>
                  <span class="line">|</span>
                  <a href="http://localhost:8080/#/Home/playList/?cat=电子">电子</a>
                </div>
                <div class="rmd-more">
                  <a href="http://localhost:8080/#/Home/playList">更多</a>
                  <span class="rmd-more-bg"></span>
                </div>
              </div>
              <ul class="rmd-list">
                <li class="rmd-ll" v-for="item in rmdList" :key="item.id">
                  <div class="rmd-llbg">
                    <img :src="item.picUrl + '?param=140y140'" :title="item.name" />
                    <a :href="
                      'http://localhost:8080/#/playList/?id=' + item.id
                    " class="msk"></a>
                    <div class="rmd-llbtm">
                      <a href="#" @click.prevent="switchPL(item.id)" class="icon-play"></a>
                      <i class="icon-headset"></i>
                      <i class="count">{{
                      item.playCount > 10000
                        ? (item.playCount / 10000).toFixed(0) + "万"
                        : item.playCount
                    }}</i>
                    </div>
                  </div>
                  <p class="desc" :title="item.name">
                    <a :href="
                      'http://localhost:8080/#/playList/?id=' + item.id
                    " class="tit">{{ item.name }}</a>
                  </p>
                </li>
              </ul>
            </div>
            <div class="d-new">
              <div class="d-hd">
                <a href="http://localhost:8080/#/Home/album" class="hot">新碟上架</a>
                <div class="rmd-more">
                  <a href="http://localhost:8080/#/Home/album">更多</a>
                  <span class="rmd-more-bg"></span>
                </div>
              </div>
              <div class="d-disk">
                <div class="disk-inner">
                  <a href="javascript:;" class="dk-l" @click="prevDisk"></a>
                  <div class="roll">
                    <ul class="dk-u" :style="{'left': curDiskPage * (-129) + 'px'}">
                      <li v-for="item1 in newWestList" :key="item1.id">
                        <div class="rmd-llbg dk-bg">
                          <img :src="item1.picUrl + '?param=100y100'" alt="">
                          <a :href="'http://localhost:8080/#/Home/album/?id=' + item1.id" class="msk"></a>
                          <a href="#" class="disk-play"></a>
                        </div>
                        <p class="disk-title">{{item1.name}}</p>
                        <p class="disk-author">
                          <a style="color:#ccc;text-" :href="'http://localhost:8080/#/Home/artist/?id=' + item2.id"
                            v-for="item2 in item1.artists" :key="item2.id">{{item2.name + ' / '}}</a>
                        </p>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:;" class="dk-r" @click="nextDisk"></a>
                </div>
              </div>
            </div>
            <div class="d-top">
              <div class="d-hd">
                <a href="http://localhost:8080/#/Home/toplist" class="hot">榜单</a>
                <div class="rmd-more">
                  <a href="http://localhost:8080/#/Home/toplist">更多</a>
                  <span class="rmd-more-bg"></span>
                </div>
              </div>
              <div class="d-topbody">
                <dl class="blk">
                  <dt class="top">
                    <div class="top-body-l">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + Soaring.id" class="msk"></a>
                      <img :src="Soaring.coverImgUrl + '?param=100y100'" alt="">
                    </div>
                    <div class="top-body-r">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + Soaring.id" class="top-name">
                        <h3 class="top-h">{{Soaring.name}}</h3>
                      </a>
                      <div class="btn">
                        <a href="javascript:;" class="s-bg tb1" @click="switchPL(Soaring.id)"></a>
                        <a href="javascript:;" class="s-bg tb2"></a>
                      </div>
                    </div>
                  </dt>
                  <dd>
                    <ol>
                      <li v-for="(item, index) in SoaringList" :key="item.id">
                        <span :class="['top-no', index < 3? 'top3': '']">{{index + 1}}</span>
                        <a :href="'http://localhost:8080/#/song?id=' + item.id"
                          class="song-link top-h">{{item.name}}</a>
                        <div class="oper">
                          <a href="#" class="s-bg s-bg-1"></a>
                          <a href="#" class="icon s-bg-2" @click.prevent="addmu(item.id)"></a>
                          <a href="#" class="s-bg s-bg-3"></a>
                        </div>
                      </li>
                    </ol>
                    <div class="more">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + Soaring.id">查看更多></a>
                    </div>
                  </dd>
                </dl>
                <dl class="blk">
                  <dt class="top">
                    <div class="top-body-l">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + newSong.id" class="msk"></a>
                      <img :src="newSong.coverImgUrl + '?param=100y100'" alt="">
                    </div>
                    <div class="top-body-r">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + newSong.id" class="top-name">
                        <h3 class="top-h">{{newSong.name}}</h3>
                      </a>
                      <div class="btn">
                        <a href="javascript:;" class="s-bg tb1" @click="switchPL(newSong.id)"></a>
                        <a href="javascript:;" class="s-bg tb2"></a>
                      </div>
                    </div>
                  </dt>
                  <dd>
                    <ol>
                      <li v-for="(item, index) in newSongList" :key="item.id">
                        <span :class="['top-no', index < 3? 'top3': '']">{{index + 1}}</span>
                        <a :href="'http://localhost:8080/#/song?id=' + item.id"
                          class="song-link top-h">{{item.name}}</a>
                        <div class="oper">
                          <a href="#" class="s-bg s-bg-1"></a>
                          <a href="#" class="icon s-bg-2" @click.prevent="addmu(item.id)"></a>
                          <a href="#" class="s-bg s-bg-3"></a>
                        </div>
                      </li>
                    </ol>
                    <div class="more">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + newSong.id">查看更多></a>
                    </div>
                  </dd>
                </dl>
                <dl class="blk">
                  <dt class="top">
                    <div class="top-body-l">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + Original.id" class="msk"></a>
                      <img :src="Original.coverImgUrl + '?param=100y100'" alt="">
                    </div>
                    <div class="top-body-r">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + Original.id" class="top-name">
                        <h3 class="top-h">{{Original.name}}</h3>
                      </a>
                      <div class="btn">
                        <a href="javascript:;" class="s-bg tb1" @click="switchPL(Original.id)"></a>
                        <a href="javascript:;" class="s-bg tb2"></a>
                      </div>
                    </div>
                  </dt>
                  <dd>
                    <ol>
                      <li v-for="(item, index) in OriginalList" :key="item.id">
                        <span :class="['top-no', index < 3? 'top3': '']">{{index + 1}}</span>
                        <a :href="'http://localhost:8080/#/song?id=' + item.id"
                          class="song-link top-h">{{item.name}}</a>
                        <div class="oper">
                          <a href="#" class="s-bg s-bg-1"></a>
                          <a href="#" class="icon s-bg-2" @click.prevent="addmu(item.id)"></a>
                          <a href="#" class="s-bg s-bg-3"></a>
                        </div>
                      </li>
                    </ol>
                    <div class="more">
                      <a :href="'http://localhost:8080/#/Home/toplist?id=' + Original.id">查看更多></a>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="disvoer-r"></div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: "Home",
  data () {
    return {
      urlShow: [
        "https://p1.music.126.net/_eRA_u6If7WzrAGhEFwcpw==/109951167327303215.jpg?imageView&quality=89",
        "https://p1.music.126.net/6lu7RKkVMrIKHnWdkk-KYQ==/109951167331259886.jpg?imageView&quality=89",
        "https://p1.music.126.net/PCyVgwfgEyAH59wNzyKjjQ==/109951167331229668.jpg?imageView&quality=89",
        "https://p1.music.126.net/8Qj1OwPUpm0yJKyIPmhZqg==/109951167327469325.jpg?imageView&quality=89",
        "https://p1.music.126.net/C6b0ZObgL6kHJW_l_pd1eQ==/109951167326218700.jpg?imageView&quality=89",
        "https://p1.music.126.net/GEgyUoPH0I5VHILTBXviEw==/109951167331349848.jpg?imageView&quality=89",
        "https://p1.music.126.net/q8WoKAnPl_2MFghZzLfqug==/109951167331371032.jpg?imageView&quality=89",
        "https://p1.music.126.net/4vH8aD0MvwqCxvw3toBdNw==/109951167326203669.jpg?imageView&quality=89",
      ],
      backShow: [
        "https://p1.music.126.net/_eRA_u6If7WzrAGhEFwcpw==/109951167327303215.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/6lu7RKkVMrIKHnWdkk-KYQ==/109951167331259886.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/PCyVgwfgEyAH59wNzyKjjQ==/109951167331229668.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/8Qj1OwPUpm0yJKyIPmhZqg==/109951167327469325.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/C6b0ZObgL6kHJW_l_pd1eQ==/109951167326218700.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/GEgyUoPH0I5VHILTBXviEw==/109951167331349848.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/q8WoKAnPl_2MFghZzLfqug==/109951167331371032.jpg?imageView&blur=40x20",
        "https://p1.music.126.net/4vH8aD0MvwqCxvw3toBdNw==/109951167326203669.jpg?imageView&blur=40x20",
      ],
      currendPage: 0,
      timer: "",
      rmdList: [], //推荐音乐列表
      newWestList: [],   // 新碟上架
      curDiskPage: 0,
      Soaring: {},
      SoaringList: [],
      newSong: {},
      newSongList: [],
      Original: {},
      OriginalList: []
    };
  },
  methods: {
    ...mapMutations(['addMusic', 'switchPlayList']),
    // 轮播图函数
    crollPic () {
      document.querySelector(".d-flag").style.backgroundImage =
        "url(" + this.backShow[this.currendPage] + ")";
      document
        .querySelector(".img-flag")
        .setAttribute("src", this.urlShow[this.currendPage]);
      var dots = document.querySelectorAll(".dots a");
      dots.forEach((ele, i) => {
        if (i == this.currendPage) {
          ele.classList.add("bg-click");
        } else {
          ele.classList.remove("bg-click");
        }
      });
    },
    showleft () {
      // 先清除定时器防止同一时间进行过多页面切换
      clearInterval(this.timer);
      this.currendPage--;
      if (this.currendPage == -1) {
        this.currendPage = 7;
      }
      this.crollPic();
      // 开启定时器
      this.timer = setInterval(this.show, 5000);
    },
    showright () {
      clearInterval(this.timer);
      this.currendPage++;
      if (this.currendPage == 8) {
        this.currendPage = 0;
      }
      this.crollPic();
      this.timer = setInterval(this.show, 5000);
    },
    // 定时器
    show () {
      this.currendPage++;
      if (this.currendPage == 8) {
        this.currendPage = 0;
      }
      this.crollPic();
    },
    // dot切换图片
    switchimg (e, val) {
      clearInterval(this.timer);
      var dots = document.querySelectorAll(".dots a");
      document.querySelector(".d-flag").style.backgroundImage =
        "url(" + this.backShow[val] + ")";
      document
        .querySelector(".img-flag")
        .setAttribute("src", this.urlShow[val]);
      dots.forEach((ele, i) => {
        if (i == val) {
          ele.classList.add("bg-click");
        } else {
          ele.classList.remove("bg-click");
        }
      });
      this.timer = setInterval(this.show, 5000);
    },
    // disk轮播图
    prevDisk () {
      this.curDiskPage -= 1;
      if (this.curDiskPage < 0) {
        this.curDiskPage = 7
      }
    },
    nextDisk () {
      this.curDiskPage += 1;
      if (this.curDiskPage > 7) {
        this.curDiskPage = 0;
      }
    },
    async addmu (id) {
      let { data: mu } = await this.$http.get('song/detail', {
        params: {
          ids: id
        }
      })
      mu = mu.songs
      this.addMusic(mu);
    },
    async switchPL (id) {
      let { data: pl } = await this.$http.get('playlist/detail', {
        params: {
          id: id
        }
      })
      pl = pl.playlist.tracks;
      this.switchPlayList(pl);
      this.$store.dispatch('getlyric', pl[0].id)
    }
  },
  async created () {
    const { data: res } = await this.$http.get("personalized", {
      params: {
        limit: 8,
      },
    });
    this.rmdList = res.result;
    const { data: newWest } = await this.$http.get('album/newest');
    this.newWestList = newWest.albums;
    const { data: soaring } = await this.$http.get('playlist/detail', {
      params: {
        id: 19723756
      }
    })
    this.Soaring = soaring.playlist;
    soaring.playlist.tracks.forEach((e, i) => {
      if (i < 10) {
        this.SoaringList.push(e)
      }
    });
    const { data: newSong } = await this.$http.get('playlist/detail', {
      params: {
        id: 3779629
      }
    })
    this.newSong = newSong.playlist;
    newSong.playlist.tracks.forEach((e, i) => {
      if (i < 10) {
        this.newSongList.push(e)
      }
    })
    const { data: Original } = await this.$http.get('playlist/detail', {
      params: {
        id: 2884035
      }
    })
    this.Original = Original.playlist;
    Original.playlist.tracks.forEach((e, i) => {
      if (i < 10) {
        this.OriginalList.push(e)
      }
    })
  },
  mounted () {
    this.timer = setInterval(this.show, 5000);
  },
  beforeUnmount () {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.d-flag {
  background-size: 6000px;
  background-position: center center;
}
.d-flag .wrap {
  position: relative;
  height: 285px;
  width: 982px;
  margin: 0 auto;
}
.wrap .show {
  position: relative;
  height: 285px;
  width: 985px;
}
.wrap .show-img {
  width: 985px;
  height: 100%;
  overflow: hidden;
}
.wrap .img-flag {
  display: block;
  width: 730px;
}

.wrap .download {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 0;
  height: 285px;
  width: 255px;
  background: url("../../assets/download.png") no-repeat 0 0;
}
.wrap .click-flag {
  display: block;
  position: absolute;
  height: 63px;
  width: 37px;
  top: 50%;
  margin-top: -31px;
  background: url("../../assets/banner.png") no-repeat 0 9999px;
  text-indent: -9999px;
  cursor: pointer;
}
.wrap .showleft {
  left: -68px;
  background-position: 0 -360px;
}
.wrap .showright {
  right: -68px;
  background-position: 0 -508px;
}
.wrap .showright:hover {
  background-position: 0 -578px;
}
.wrap .showleft:hover {
  background-position: 0 -430px;
}
.show .dots {
  position: absolute;
  height: 20px;
  width: 730px;
  text-align: center;
  top: 265px;
  left: 0;
}
.dots .pg {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../../assets/banner.png") no-repeat 3px -343px;
}
.dots .pg:hover,
.dots .bg-click {
  background-position: -16px -343px;
}
.side-download {
  width: 215px;
  height: 52px;
  margin-top: 186px;
  margin-left: 19px;
  cursor: pointer;
  background: url("../../assets/download.png") no-repeat 0 9999px;
}
.side-download:hover {
  background-position: 0 -290px;
}
.tips-download {
  font-size: 12px;
  margin: 10px 0;
  text-align: center;
  color: #8d8d8d;
}
.shadow-l,
.shadow-r {
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
  background: url("../../assets/banner.png") no-repeat -1px 0;
  &::after {
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    content: "";
  }
}
.shadow-r {
  left: auto;
  right: -20px;
  background-position: -20px 0;
}

.discover-module::after {
  clear: both;
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
}
.discover-l {
  position: relative;
  float: left;
  width: 100%;
  margin-right: -250px;
}
.discover-lbody {
  margin-right: 251px;
}
.d-wrap {
  padding: 20px 20px 40px;
}
.d-hd,
.rmd-more-bg,
.dk-l,
.dk-r,
.dk-u li,
.s-bg {
  background: url("../../assets/index.png") no-repeat 0 9999px;
}
.d-hd {
  height: 33px;
  padding-left: 34px;
  padding-right: 10px;
  margin-bottom: 2px;
  background-position: -225px -156px;
  border-bottom: 2px solid #c10d0c;
}
.hot {
  float: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
}
.rmd-tab {
  float: left;
  margin: 7px 0 0 20px;
  a {
    color: #666;
    &:hover {
      text-decoration: underline;
    }
  }
}
.rmd-more {
  float: right;
  margin-top: 9px;
  a {
    &:hover {
      text-decoration: underline;
    }
  }
}
.rmd-more-bg {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-left: 4px;
  background-position: 0 -242px;
}
.rmd-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-left: -42px;
}
.rmd-ll {
  width: 140px;
  height: 204px;
  padding: 0 0 30px 42px;
}
.rmd-llbg {
  position: relative;
  width: 140px;
  height: 140px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.desc {
  width: 100%;
  margin: 8px 0 3px;
  font-size: 14px;
  .tit {
    display: inline-block;
    max-width: 100%;
    display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
    -webkit-box-orient: vertical; /*值必须为vertical*/
    -webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/
    overflow: hidden;
    text-overflow: ellipsis;
    &:hover {
      text-decoration: underline;
    }
  }
}
.d-disk {
  position: relative;
  margin: 20px 0 37px 0;
  border: 1px solid #d3d3d3;
  height: 186px;
}
.disk-inner {
  height: 186px;
  padding-left: 16px;
  background-color: #f5f5f5;
}
.dk-l,
.dk-r {
  position: absolute;
  left: 4px;
  top: 71px;
  width: 17px;
  height: 17px;
  background-position: -260px -75px;
}
.dk-r {
  left: auto;
  right: 4px;
  background-position: -300px -75px;
}
.roll {
  position: relative;
  float: left;
  overflow: hidden;
  width: 645px;
  height: 180px;
}
.dk-u {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  position: absolute;
  margin-top: 24px;
  top: 0;
  transition: all 0.6s;
  li {
    display: inline;
    width: 118px;
    height: 150px;
    margin-left: 11px;
    background-position: -260px 100px;
  }
}
.dk-bg {
  width: 100px;
  height: 100px;
  margin-bottom: 7px;
  &:hover .disk-play {
    display: block;
  }
}
.disk-play {
  display: none;
  position: absolute;
  width: 22px;
  height: 22px;
  background-position: 0 -85px;
  right: 6px;
  bottom: 4px;
}
.disk-title,
.disk-author {
  width: 90%;
  line-height: 18px;
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  a {
    &:hover {
      text-decoration: underline;
    }
  }
}
.d-top {
  margin-bottom: 53px;
}
.d-topbody {
  display: flex;
  margin-top: 20px;
  height: 472px;
  padding-left: 1px;
  background: url("../../assets/index_bill.png") no-repeat;
  .more {
    height: 32px;
    margin-right: 32px;
    text-align: right;
    line-height: 32px;
    a:hover {
      text-decoration: underline;
    }
  }
  ol {
    margin-left: 50px;
    height: 319px;
    line-height: 32px;
    li {
      height: 32px;
      vertical-align: middle;
      .top-no {
        float: left;
        position: relative;
        width: 35px;
        height: 32px;
        color: #666;
        text-align: center;
        margin-left: -35px;
        font-size: 16px;
      }
      .top3 {
        color: #c10d0c;
      }
      .song-link {
        float: left;
        height: 32px;
        width: 90px;
      }
      .oper {
        display: none;
        float: right;
        margin-top: 7px;
        width: 82px;
        a {
          float: left;
          width: 17px;
          height: 17px;
          margin-right: 10px;
        }
      }
      &:hover {
        .song-link {
          text-decoration: underline;
        }
        .oper {
          display: block;
        }
      }
    }
  }
}
.s-bg-1 {
  background-position: -267px -268px;
}
.s-bg-1:hover {
  background-position: -267px -288px;
}
.s-bg-2 {
  margin-top: 2px;
  background-position: 0 -700px;
}
.s-bg-2:hover {
  background-position: -22px -700px;
}
.s-bg-3 {
  background-position: -297px -268px;
}
.s-bg-3:hover {
  background-position: -297px -288px;
}
.blk {
  flex: 1;
}
.top {
  display: flex;
  justify-content: left;
  height: 100px;
  padding: 20px 0 0 19px;
}
.top-body-l {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  a {
    background-position: -145px -57px;
  }
  img {
    width: 100%;
  }
}
.top-body-r {
  width: 116px;
  margin: 6px 0 0 10px;
  .btn {
    margin-top: 10px;
    a {
      width: 22px;
      height: 22px;
      float: left;
      margin-right: 10px;
    }
    .tb1 {
      background-position: -267px -205px;
    }
    .tb1:hover {
      background-position: -267px -235px;
    }
    .tb2 {
      background-position: -300px -205px;
    }
    .tb2:hover {
      background-position: -300px -235px;
    }
  }
}
.top-name:hover {
  text-decoration: underline;
}
.top-h {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.disvoer-r {
  position: relative;
  float: right;
  width: 250px;
  zoom: 1;
}
</style>